<template>
  <div class="announcement-container">
    <router-link to="/home/service/postMessage">
      <div class="scrolling-content" ref="scrollingContent">
        <div v-for="(item, index) in tableData" :key="index" class="scroll-item">
          <span class="dot-before">{{ item.communityname }}</span>
          <span class="dot-before">{{ item.content }}</span>
          <span class="dot-before" style="text-align: right">{{ formatDate(item.createtime) }}</span>
          <span class="more-link">更多</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentIndex: 0,
      scrollInterval: null,
    };
  },
  methods: {
    async getPostData() {
      try {
        const { data: res } = await this.axios.get(
          "poster/getPosterData?currPage=0&pageNum=100"
        );
        // console.log(res);
        this.tableData = res.data;
        this.startScrolling();
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      return date.toLocaleString();
    },
    startScrolling() {
      this.scrollInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.tableData.length;
        this.$refs.scrollingContent.style.transform = `translateY(-${this.currentIndex * 56}px)`;
      }, 2000); // 每3秒滚动一次
    },
    stopScrolling() {
      clearInterval(this.scrollInterval);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getPostData();

      // 添加鼠标悬停事件监听器
      this.$refs.scrollingContent.addEventListener('mouseenter', this.stopScrolling);
      this.$refs.scrollingContent.addEventListener('mouseleave', this.startScrolling);
    });
  },
  beforeDestroy() {
    // 清除事件监听器
    if (this.$refs.scrollingContent) {
      this.$refs.scrollingContent.removeEventListener('mouseenter', this.stopScrolling);
      this.$refs.scrollingContent.removeEventListener('mouseleave', this.startScrolling);
    }
  },
};
</script>

<style scoped>
.announcement-container {
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  height: 56px; /* 固定高度为一行的高度 */
  position: relative;
}

.scrolling-content {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.scroll-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  font-weight: bold;
  color: #303133;
}

.scroll-item > span {
  flex: 1;
  text-align: left;
  margin-right: 10px; /* 调整间距 */
  min-width: 200px; /* 设置最小宽度 */
}

.scroll-item > span:last-child {
  margin-right: 0; /* 最后一个元素不设置右边距 */
  min-width: 50px;
}

.dot-before::before {
  content: "• ";
  color: #333;
}

.more-link {
  color: #389af9; /* "更多"文字为蓝色 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  text-align: left;
  margin-left: 10px; /* 调整与日期的距离 */
}

.scroll-item:last-child {
  border-bottom: none;
}
</style>